<template>
	<view class="history-content">
		<u-navbar :is-back="false" title="历史记录" :titleBold="true"></u-navbar>


		<!-- <view class="wrap">
			<u-row gutter="16" justify="space-between">
				<u-col span="8">
					<view class="demo-layout bg-purple">
 -->


		<u-time-line v-show="!isEmpty">
			<u-time-line-item v-for="item in list" :key="item.time">
				<template v-slot:content>
					<view>
						<view class="u-order-desc">{{item.mileage}} 公里</view>
						<view class="u-order-time">{{item.time}}</view>
					</view>
				</template>
			</u-time-line-item>
		</u-time-line>


		<!-- 
					</view>
				</u-col>
				<u-col span="4">
					<view class="demo-layout bg-purple-light">
						<u-button :style="{'margin':buttonMargin+'px 0px' }" type="primary"
							v-for="(single,index) in month" :key="month.index">
							{{single}}
						</u-button>
					</view>
				</u-col>
			</u-row>
		</view> -->


		<u-empty text="暂无跑步记录" mode="list" v-show="isEmpty"></u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
				list: [],
				buttonMargin: 0,
				isEmpty: false,
			}
		},
		onLoad() {

		},
		methods: {

		},
		created() {
			let _this = this;
			let value = uni.getStorageSync('UserMsg');
			this.$u.post('/history/get/data', {
				id: value.StuID
			}).then(res => {
				console.log(res);
				if (res.rst === undefined) {
					this.$data.isEmpty = true;
				} else {
					this.$data.list = res.rst.reverse();
					console.log(this.$data.list);
				}
			})

			// let _this = this;
			// uni.getSystemInfo({
			// 	success: function(res) {
			// 		console.log("屏幕宽度：" + res.screenWidth);
			// 		console.log("屏幕高度：" + res.screenHeight);
			// 		console.log("可使用窗口宽度：" + res.windowWidth);
			// 		console.log("可使用窗口高度：" + res.windowHeight);

			// 		_this.$data.buttonMargin = res.windowHeight / 12;
			// 	}
			// });
		},
		onShow() {

		},
	}
</script>

<style scoped lang="scss">
	.history-content {
		margin: 20rpx 0rpx 0rpx 50rpx;
	}

	.u-order-desc {
		color: rgb(0, 0, 0);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}



	.demo-layout {
		height: 80rpx;
		border-radius: 8rpx;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}
</style>
